import React, { Component } from 'react';
/*
  学习目标：children练习-模拟Vue的作用域插槽
*/
export default class App extends Component {
  render() {
    return (
      <div>
        <Child>
          {(data) => {
            console.log('data  ----->  ', data);
            // 2. 父组件自定义渲染的内容
            return (
              <ul>
                {data.map((item, index) => (
                  <li key={index}>{item}</li>
                ))}
              </ul>
            );
          }}
        </Child>
        <Child>
          {(data) => {
            // 自定义渲染的内容
            return data.map((item, index) => {
              return <i key={index}>{item}</i>;
            });
          }}
        </Child>
      </div>
    );
  }
}

class Child extends React.Component {
  state = {
    list: ['React', 'Vue', 'JS'],
  };

  render() {
    const { children } = this.props;
    return (
      <div>
        <h1>Child</h1>
        {/*  1. 子组件向父组件传值 - 函数 */}
        <h1>{children(this.state.list)}</h1>
      </div>
    );
  }
}
